   <!-- 企业审批清单   应该是好了 --> 
<template>
  <!-- filterable 属性即可启用搜索功能。 默认情况下，Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。-->
  <!-- 可以利用筛选功能快速查找选项。

为el-select添加filterable属性即可启用搜索功能。 默认情况下，Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。 -->
  <h2>企业审批清单</h2>
  <div style="display: flex;justify-content: ;">
    <!-- 下拉选择 -->
    <el-select v-model="value1" filterable placeholder="审批状态" style="margin-left: 10px" @change="change">
      <el-option v-for="item in tableopition2" :key="item" :label="item" :value="item" />
    </el-select>
    <el-select  v-model="value2" filterable placeholder="审批类型" style="margin-left: 10px" @change="change">
      <el-option v-for="item2 in tableopition4" :key="item2" :label="item2" :value="item2" />
    </el-select>
    <el-select  v-model="value3" filterable placeholder="所属市区" style="margin-left: 10px" @change="change">
      <el-option v-for="item in tableopition1" :key="item" :label="item" :value="item"/>
    </el-select>
    <el-select v-model="value4" filterable  placeholder="处理单位" style="margin-left: 10px" @change="change">
      <el-option v-for="item in tableopition3" :key="item" :label="item"  :value="item" />
    </el-select>
  <div class="demo-date-picker" style="margin-left: 10%;">
    <div class="block">
      <span class="demonstration" style="color: rgb(168,191,208);"> 选择审批日期:&nbsp; &nbsp; &nbsp; </span>
      <el-date-picker
        v-model="datavalue"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
        :size="size"
        @change="change"
      />
    </div>
   </div>
  </div>
      <!-- 搜索栏 -->
  <div style="margin-top: 30px; margin-left: 10px">

    <div>
      <el-input v-model="input" placeholder="" style="width: 30%" />
      <el-button @click="seacrhs"  round   style="border-radius: 0;background-color: rgb(22, 155, 213);color: white;">搜索</el-button>
    </div>
    <div id="maxbox" ref="myRef"> <!-- 自定义列表 -->
      <div >
         <span @click="clickplay()">自定义列表</span> 
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>审批主题</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>企业名称</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>审批类型</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>审批状态</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>审批单位</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked disabled />
          <label>提交时间</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="cszt" />
          <label>超时状态</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="ssqs"/>
          <label>所属区市</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="spsj"/>
          <label>审批时间</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="tbr"/>
          <label>提报人</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="tbrzw" />
          <label>提报人职务</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="tbrsj"/>
          <label>提报人手机</label>
        </div>
        <div class="selectbox">
          <input type="checkbox" checked id="gddh"/>
          <label>固定电话</label>
        </div>
      </div>
    </div>

    <el-button id="maxbox2" @click="exportData" type="success" style="background-color: rgb(22, 155, 213)">
      <a href="http://172.16.123.189:8080/approval_checklist/exportApprovalChecklist" style="background-color: rgb(22, 155, 213);text-decoration:none;color: white;">导出数据</a>
    </el-button>

  </div>
 <!-- 表单 -->
  <div id="maxbox3" style="margin-top: 30px">
   
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed="left" prop="id4" label="序号" width="60" />
      <el-table-column prop="approvalSubject" label="审批主题" width="320" />
      <el-table-column prop="name" label="企业名称" width="160" />
      <el-table-column prop="approvalType" label="审批类型" width="160" />
      <el-table-column prop="approvalStatus" label="审批状态" width="160" />
      <el-table-column prop="timeoutStatus" label="超时状态" v-if="t" width="160" />
      <el-table-column prop="region" label="所属区市" v-if="s" width="160" />
      <el-table-column prop="approvalUnit" label="审批单位"  width="160" />
      <el-table-column prop="submissionTime" label="提交时间" v-if="j" width="180" />
      <el-table-column prop="approvalTime" label="审批时间"  width="180" />
      <el-table-column prop="reporter" label="提报人" v-if="r" width="160" />
      <el-table-column prop="reporter" label="提报人职务" v-if="zw" width="160" />
      <el-table-column prop="reporPhoneid" label="提报人手机" v-if="sj" width="160" />
      <el-table-column prop="reporPhoneid" label="固定电话" v-if="h" width="160" />
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope" >
          <el-button link type="primary" size="small" @click="handleClick(scope)" >查看</el-button>
          <el-button link type="primary" size="small" @click="processClick(scope)">处理</el-button>
          <el-button link type="primary" size="small" @click="processClicker">审批历史</el-button>
          <el-button link type="primary" size="small" @click="processClickers">审批督办</el-button>
          <el-button link type="primary" size="small" @click="processClickerss">审批审核管理</el-button>
          <el-button link type="primary" size="small" @click="processClickersss">审批评价管理</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <div class="page" style="display: flex;justify-content: center;">
    <el-pagination background layout="prev, pager, next" :total='11' />
  </div>
  <!-- <button  style="width:200px;height:100px" @cliack="history">点击跳转查看审批历史</button> -->
</template>


<script lang="ts" setup>
import {ref, onMounted} from "vue";
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter();
/* value1 2 对应v-modole */
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");
const value4 = ref("");
const input = ref("");

//=====以下3个const是关于日期的
const size = ref<'default' | 'large' | 'small'>('default')
const datavalue= ref('') // 日期的ref
const shortcuts = [
  {
    text: '周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '季',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
/* 导出数据 */
const exportData = function () {
//  approval_checklist/exportApprovalChecklist   //导出审批清单
};

/*      _________________________________________________       复选框 */
        const myRef = ref();
        let t:any=ref("true");//超时状态
        let s:any=ref("true");//所属区市
        let j:any=ref("true");//审批时间
        let r:any=ref("true");//提报人
        let h:any=ref("true");
        let zw:any=ref("true");//职务
        let sj:any=ref("true");//手机
const clickplay = function () {
    if (myRef.value.style.height == '36px' || myRef.value.style.height=='') {
      myRef.value.style.height = "448px"
    }else if(myRef.value.style.height = "448px"){
      myRef.value.style.height = "36px";
    } 
      const cszt:any=document.getElementById("cszt");
      t.value=cszt.checked;
      const tbrsj:any=document.getElementById("tbrsj");
      sj.value=tbrsj.checked;
      const spsj:any=document.getElementById("spsj");
      j.value=spsj.checked;
      const ssqs:any=document.getElementById("ssqs");
      s.value=ssqs.checked;
      const tbr:any=document.getElementById("tbr");
      r.value=tbr.checked;
      const gddh:any=document.getElementById("gddh");
      h.value=gddh.checked;
      const tbrzw:any=document.getElementById("tbrzw");
      zw.value=tbrzw.checked;
  };



// 跳到审批历史页面，最后要删掉
const processClicker = (scope:any) =>{ router.push({path:"/historyer"}) }

// 跳到审批督办页面，最后要删掉
const processClickers = (scope:any) =>{ router.push({path:"/superviser"}) }
const processClickerss = (scope:any) =>{ router.push({path:"/checker"}) }
const processClickersss = (scope:any) =>{ router.push({path:"/evaluater"}) }

// ---------------------------------------------点击查看详情
const handleClick = (scope:any) => {
let id=scope.row.id4
console.log(id);
 router.push({path:"/ProcessingAndApproval",query:{id:id}})
};

// 点击处理审批
const processClick = (scope:any) =>{
  let id=scope.row.id4
  router.push({path:"/processing",query:{id:id}})
}
//-------------------------------------------------渲染页面
const aaa = (aa: any) => {
 var date = new Date(aa); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
 var Y = date.getFullYear() + '/';
 var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
 var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
 var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
 var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
 var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
 return Y + M + D + h + m + s;
 }
 //--------------------------国标时间转日期
const timestampToTime=(timestamp:any)=>{
      var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      var D = date.getDate() + ' ';
      var h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':' ;
      var m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':' ;
      var s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
      return Y+M+D+h+m+s;
}
const tableData:any= ref()//渲染数据
//这是下拉框动态选项
const tableopition1:any=ref([])
const tableopition2:any=ref([])
const tableopition3:any=ref([])
const tableopition4:any=ref([])
// 下拉框筛选触发请求
 const change=(()=>{

  let time= timestampToTime(datavalue.value[0])//开始日期
  let time2=timestampToTime(datavalue.value[1])//结束日期
  
   console.log(time);
   console.log(time2);

    //  console.log(value2.value);
    //  console.log(value3.value);
    //  console.log(value4.value);
     axios({    
       method: 'post',
       url: 'http://172.16.123.189:8080/approval_checklist/findApprovalChecklistByCondition',
       params: {
       approvalStatus:value1.value,//状态
       approvalType:value2.value,//审批类型
       region:value3.value,//城市
       approvalUnit:value4.value,//审批单位；
       starttime:time,
       endtime:time2,
       page:1,
       limit:10,   
       }
       }).then((res:any) => {
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
        }
        })
 })
  //搜索发起请求
 const seacrhs=function(){ 
 
     axios({    
       method: 'post',
       url: 'http://172.16.123.161:8080/approval_checklist/selectname',
       params: {
        name:input.value,
        currentPage:1,
        pageSize:10    
       }
       }).then((res:any) => {
        console.log(res);
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
        }
      })
    }  

//onMounted 页面加载前，发起请求渲染页面数据
onMounted(()=>{
               axios({  
                method: 'post',
                url: 'http://1.14.73.59:8080/approval_checklist/findApprovalChecklist',
                params: {
                  currentPage:1,
                  pageSize:10    
                }
              }).then((res:any) => {
                tableData.value=res.data.data
                //这个循环是转换时间格式
                  for(let i=0;i<tableData.value.length;i++){
                    tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
                    tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
                    tableopition1.value.push(tableData.value[i].region) //所属市区
                    tableopition2.value.push(tableData.value[i].approvalStatus)//审批状态
                    tableopition3.value.push(tableData.value[i].approvalUnit)//审批单位
                    tableopition4.value.push(tableData.value[i].approvalType)//审批类型
                     removeDuplicate(tableopition2.value) //去重，上面const的值都已经去重了
                     removeDuplicate(tableopition3.value)
                     removeDuplicate(tableopition4.value)
                    removeDuplicate(tableopition1.value)  
                     function removeDuplicate(arr:any) {
                      let len = arr.length
                     for (let i = 0; i < len; i++) {
                     for (let j = i + 1; j < len; j++) {
                        if (arr[i] === arr[j]) {
                         arr.splice(j, 1)
                           len-- // 减少循环次数提高性能
                           j-- // 保证j的值自加后不变
                        }
                       }
                      }
                       return arr
                 }
                  }
              })
        })
        
  

</script>

<style>
#maxbox {
  position: absolute;
  width: 124px;
  height: 36px;
  right: 600px;
  top: 130px;
  z-index: 999;
  text-align: center;
  line-height: 40px;
  background-color: rgb(22, 155, 213);
  overflow: hidden;
  transition: all 0.2s linear;
  border-radius: 3px;
}
#maxbox div {
  width: 123px;
  color: white;
  font-size: 14px;
}
#maxbox div div{
  height: 30px;
  width: 122px;
}
#maxbox2 {
  width: 120px;
  height: 36px;
  background-color: rgb(22, 155, 213);
  text-align: center;
  line-height: 36px;
  position: absolute;
  right: 400px;
  top: 130px;
}

/* #clickbox {
  width: 120px;
  height: 36px;
  background-color: rgb(22, 155, 213);
  text-align: center;
  line-height: 36px;
}
#checkbox {
  overflow: hidden;
  height: 0px;
} */
.selectbox {
  width: 120px;
  height: 20px;
  border: 1px solid rgb(104, 100, 100);
  background-color: rgb(124, 122, 122);
  font-size: 14px;
}
.selectbox input{
  margin-left: -10px;
}
.selectbox label{
  color:white;
  font-size: 6px;
}
</style>